<template>
	<view class="box">
		<view class="list-item" v-for="(item,index) in goodList" :key='index'>
			<view class="group">
				<checkbox-group @change="changeitem(item)" checked class="checkbox">
					<checkbox :value="item.unitPrice" :checked="item.checked" />
				</checkbox-group>

				<image :src="item.src"></image>
				<view class="goods">
					<view class="price">￥{{item.unitPrice}}</view>
					<view class="name">{{item.name}}</view>
					<view class="order-info">
						<view>产地：{{item.home}}</view>
						<view>{{item.level}}</view>
						<view>{{item.speci}}</view>
					</view>

					<view class="subtotal">
						<view class="text">
							<view>单品小计：</view>
							<view>￥{{item.subtotal}}</view>
						</view>
						<view class="number">
							<wm-numberBox :value='item.numberBox' model="1" @change="addShopCart($event, item, index)">
							</wm-numberBox>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="foot-box3">
			<view class="checkbox">
				<checkbox-group @change="selectAll">
					<checkbox :checked="allChecked">全选</checkbox>
				</checkbox-group>
			</view>

			<view class="total-box">
				<view class="total">合计：￥{{totalPrice}}</view>
				<view class="btn">
					<button class="foot-btn" @click="settlement">结算</button>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodList: [{
						id: 0,
						// src: '../../static/img/gancao.jpg',
						unitPrice: '23',
						name: '板蓝根',
						home: '河北',
						level: '特级',
						speci: '500g/件',
						subtotal: '23',
						numberBox: 1,
						checked: false
					},
					{
						id: 1,
						// src: '../../static/img/gancao.jpg',
						unitPrice: '50',
						name: '炒白芍',
						home: '甘肃',
						level: '特级',
						speci: '500g/件',
						subtotal: '50',
						numberBox: 1,
						checked: false
					}
				],
				checkList: [], //选中值
				allChecked: false, //是否全选

			}
		},
		//计算总价
		computed: {
			totalPrice() {
				let totalPrice = 0
				this.goodList.map(item => {
					item.checked ? totalPrice += item.numberBox * item.unitPrice : totalPrice += 0
				})
				return totalPrice
			}
		},
		methods: {
			//单选
			changeitem(item) {
				item.checked = !item.checked
				if (!item.checked) {
					this.allChecked = false
				} else {
					// 判断每一个商品是否是被选择的状态
					const cartList = this.goodList.every(item => {
						return item.checked === true
					})
					if (cartList) {
						this.allChecked = true
					} else {
						this.allChecked = false
					}
				}
			},
			//全选，全不选
			selectAll() {
				this.allChecked = !this.allChecked
				if (this.allChecked) {
					this.goodList.map(item => {
						item.checked = true
					})
				} else {
					this.goodList.map(item => {
						item.checked = false
					})
				}
			},
		}
	}
</script>

<style>
	.list-item {
		width: 100%;
		height: 200px;
	}
</style>
